<template>
  <div>
    <div>
      <el-button type="success" @click="openAddDialog()">
        新增用户
        <el-icon>
          <Plus/>
        </el-icon>
      </el-button>
      <el-button type="danger" @click="deleteInfos">
        删除用户
        <el-icon>
          <Close/>
        </el-icon>
      </el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="Id" fit/>
      <el-table-column prop="dormitoryName" label="楼栋" fit>
        <template #default="scope">
          <span v-if="scope.row.dormitoryName == null">未选择宿舍</span>
          <span v-if="scope.row.dormitoryName != null">{{ scope.row.dormitoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="宿舍号" fit>
        <template #default="scope">
          <span v-if="scope.row.number == 0">未选择宿舍</span>
          <span v-if="scope.row.number != 0">{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" fit/>
      <el-table-column prop="phone" label="电话" width="200" fit/>
      <el-table-column prop="eMail" label="邮箱" width="200" fit/>
      <el-table-column prop="cardId" label="身份证" width="200" fit/>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="openUpdateDialog(scope.row)">
            修改
          </el-button>
          <div v-show="showRole" style="display: inline">
            <el-button v-if="scope.row.roleId == 3" link type="primary" size="small"
                       @click="addRole(scope.row)">
              设为管理
            </el-button>
            <el-button v-if="scope.row.roleId == 2" link type="primary" size="small"
                       @click="removeRole(scope.row)">
              取消管理
            </el-button>
          </div>
          <el-button link type="primary" size="small" @click="deleteInfo(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" :total="total"/>
    </div>
    <div>
      <Add :get-dialog="addDialog" @close="close()"></Add>
      <Update :get-dialog="updateDialog" :get-info="tableInfo" @close="close()"></Update>
    </div>
  </div>
</template>

<script>

import {Plus, Position, Close} from "@element-plus/icons";
import Add from "@/components/info/add";
import Update from "@/components/info/update";
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "table",
  components: {
    Update,
    Add,
    Plus, Position, Close
  },
  props: {
    search: {
      type: Object,
      required: true
    }
  },
  watch: {
    'search.name': {
      handler(val) {
        this.form.name = val
        this.getUserInfo()
      },
      deep: true
    }
  },
  data() {
    return {
      addDialog: false,
      updateDialog: false,
      form: {
        name: null
      },
      total: 0,
      tableData: [],
      ids: [],
      tableInfo: {},
      showRole: false
    }
  },
  methods: {
    getUserInfo() {
      let data = JSON.parse(localStorage.getItem("user"));
      data.name = this.form.name
      data.dormitoryId = undefined
      axios({
        url: "http://localhost:8888/user/all",
        method: "post",
        data: data
      }).then(res => {
        if (res.status == 200) {
          this.tableData = res.data
        }
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    openAddDialog() {
      this.addDialog = true
    },
    openUpdateDialog(data) {
      this.tableInfo = data
      this.updateDialog = true
    },
    deleteInfo(data) {
      axios({
        url: "http://localhost:8888/user/delete/" + data.id,
        method: "delete"
      }).then(res => {
        if (res.data) {
          ElMessage({
            message: "删除数据成功!",
            type: "success"
          })
          this.getUserInfo()
        } else {
          ElMessage({
            message: "删除数据失败!",
            type: "danger"
          })
        }
      })
    },
    deleteInfos() {
      if (this.ids.length == 0) {
        ElMessage({
          message: "请选择删除的数据",
          type: "warning"
        })
      } else {
        axios({
          url: "http://localhost:8888/user/delete/" + this.ids,
          method: "delete"
        }).then(res => {
          if (res.data) {
            ElMessage({
              message: "删除数据成功!",
              type: "success"
            })
            this.getUserInfo()
          } else {
            ElMessage({
              message: "删除数据失败!",
              type: "danger"
            })
          }
        })
      }
    },
    close(value) {
      this.getUserInfo()
      this.addDialog = value
      this.updateDialog = value
    },
    removeRole(data) {
      data.roleId = 3
      axios({
        url: "http://localhost:8888/user/changeRole",
        method: "put",
        data: data
      }).then(res => {
        if (res.data) {
          ElMessage({
            message: "取消管理成功",
            type: "success"
          })
          this.getUserInfo()
        } else {
          ElMessage({
            message: "取消管理失败",
            type: "danger"
          })
        }
      })
    },
    addRole(data) {
      data.roleId = 2
      axios({
        url: "http://localhost:8888/user/changeRole",
        method: "put",
        data: data
      }).then(res => {
        if (res.data) {
          ElMessage({
            message: "设为管理成功",
            type: "success"
          })
          this.getUserInfo()
        } else {
          ElMessage({
            message: "设为管理失败",
            type: "danger"
          })
        }
      })
    }
  },
  mounted() {
    let user = JSON.parse(localStorage.getItem("user"))
    if (user.roleId == 1) {
      this.showRole = true
    } else {
      this.showRole = false
    }
    this.getUserInfo()
  }
}
</script>

<style scoped>

.example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

</style>